<template>
	<view>
		<view class="p-l-30 p-r-30">

			<view class="font-40">需求填写</view>
			<view class="formItem flex_b">
				<view class="font-30">所在城市</view>
				<view class="grey font-30">请选择所在城市<text class="iconfont icon-xiangyoujiantou"></text></view>
			</view>

			<view class="formItem flex_b">
				<view class="font-30">行业</view>
				<view class="grey font-30">请选择行业<text class="iconfont icon-xiangyoujiantou"></text></view>
			</view>

			<view class="formItem flex_b">
				<view class="font-30">面积</view>
				<view class="flex">
					<input type="digit" placeholder="请输入你的求购面积" placeholder-class="grey font-30"><text class="grey font-30">m²</text>
				</view>
			</view>

			<view class="formItem flex_b">
				<view class="font-30">租金</view>
				<view class="flex">
					<input type="digit" placeholder="请输入你的求购面积" placeholder-class="grey font-30"><text class="grey font-30">元/月</text>
				</view>
			</view>

			<view class="formItem flex_b">
				<view class="font-30">经营类型</view>
				<view class="grey font-30">请选择<text class="iconfont icon-xiangyoujiantou"></text></view>
			</view>
			<view class="formItem flex_b">
				<view class="font-30">区域</view>
				<view class="grey font-30">请选择<text class="iconfont icon-xiangyoujiantou"></text></view>
			</view>
			<view class="formItem flex_b">
				<view class="font-30">店铺地址</view>
				<view class="grey font-30">请选择<text class="iconfont icon-xiangyoujiantou"></text></view>
			</view>

			<view class="formItem flex_b">
				<view class="font-30">联系方式</view>
				<input type="tel" placeholder="请输入手机号" placeholder-class="grey font-30">
			</view>
			<!-- 上传店铺图片 -->
			<view class="addImgBox">
				<view class="addImg textC flex_c m-t-20" style="justify-content: center;">
					<view class="iconfont icon-tianjia grey" style="font-size: 50rpx;"></view>
					<view class="font-20 grey">上传店铺图片</view>
				</view>
				<input type="text" placeholder="填写发布标题" placeholder-class="font-36">
			</view>
			
			
			<view class="font-40 m-t-30 m-b-20">商铺发布流程</view>

			<view class="facilitiesList">
				<view v-for="(item,index) in 4" :key="index" @click="selectFn(index)"  class="facilitiesItemA m-b-20">
						<image src="../../static/logo.png" mode=""></image>
						<view class="m-t-4">线上发布</view>
				</view>
			</view>
			
			<view class="font-40 m-t-30 m-b-20">服务介绍</view>
			<view class="facilitiesList">
				<view v-for="(item,index) in 4" :key="index" @click="selectFn(index)"  class="facilitiesItemA m-b-20">
						<image src="../../static/logo.png" mode=""></image>
						<view class="m-t-4">全网推广</view>
				</view>
			</view>
			
		</view>
		
		<view class="bottom-mar h-100"></view>
		
		<view class="bomPosition ">
			<view class="flex_b m-b-10">
			<button class="kefu textC m-l-30" open-type="contact">
				<view class="iconfont icon-kefu" style="font-size: 30rpx;"></view>
				<view class="font-28">客服</view>
			</button>
			<view class="buttonBtn">
				<view class="">免费提交</view>
				<view class="" @click="submit">全网推广</view>
			</view>
			</view>
			
		</view>

		<uv-popup ref="popupPLone" round="8" :safeAreaInsetBottom="false" :closeable="true">
			<view class="payBox">
				<view class="font-36 font-weight">支付金额(元)</view>
				<view class="font-60 font-weight f-t m-t-40">1000元</view>
				<view class="m-b-30 m-t-30" style="width: 100%;height: 2rpx;background-color: #efefef;"></view>
				<button type="primary" @click="submitPlone">支付定金</button>
				<view class="flex m-t-30">
					<view class="iconfont icon-weixuanzhong" style="font-size: 40rpx;"></view>
					<!-- <view class="iconfont icon-choose f-t" style="font-size: 40rpx;"></view> -->
					<view class="">我已阅读并同意<text style="color: #385373;">《支付协议》</text></view>
				</view>
			</view>
		</uv-popup>
	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				arrs:[]
			};
		},
		methods:{
			// 选择商铺性质
			shopXz() {
				uni.showActionSheet({
					itemList: ['转让', '出租'],
					success: function (res) {
						console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
					},
					fail: function (res) {
						console.log(res.errMsg);
					}
				});
			},
			// 全网推广
			submit() {
				this.$refs.popupPLone.open('center');
			},
			// indexOf
			selectFn(i) {
				if(this.includesFn(i)=='-1') {
					this.arrs.push(i)
				}else {
					this.arrs.splice(this.includesFn(i),1)
				}
				
			},
			includesFn(i) {
				return this.arrs.indexOf(i)
			}
		}
	}
</script>

<style lang="scss">
	.addImgBox {
		input {
			margin-top: 30rpx;
			border-bottom: 1rpx solid #efefef;
			padding-bottom: 20rpx;
		}
	}
	.addImg {
		width: 192rpx;
		height: 192rpx;
		opacity: 1;
		border-radius: 16rpx;
		background: rgba(244, 245, 246, 1);

	}
	.payBox {
		width: 514rpx;
		height: 370rpx;
		border-radius: 16rpx;
		background-color: #fff;
		padding:30rpx 25rpx;
	}
	.kefu {
		padding: 0;
		outline: none;
		border-radius: 0;
		background-color: transparent;
		line-height: inherit;
		width: max-content;
	}

	.buttonBtn {
		display: flex;
		align-items: center;

		view {
			line-height: 76rpx;
			font-size: 32rpx;
			color: #fff;
			text-align: center;
		}

		:nth-child(1) {
			left: 282rpx;
			top: 0rpx;
			width: 282rpx;
			height: 76rpx;
			opacity: 1;
			border-radius: 50rpx 0rpx 0rpx 50rpx;
			background: #3bc48c;
		}

		:nth-child(2) {
			left: 282rpx;
			top: 0rpx;
			width: 282rpx;
			height: 76rpx;
			opacity: 1;
			border-radius: 0rpx 50rpx 50rpx 0rpx;
			background: rgba(229, 99, 43, 1);
		}


	}

	.facilitiesList {
		display: flex;
		flex-wrap: wrap;
		
		.facilitiesItemA {
			width: 25%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			image {
				width: 108rpx;
				height: 108rpx;
			}
		}
		.active {
			border: 2rpx solid #e5632b !important;
		}
		.facilitiesItem {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: 110rpx;
			height: 110rpx;
			opacity: 1;
			border-radius: 16rpx;
			border: 2rpx solid rgba(229, 233, 239, 1);

			image {
				width: 48rpx;
				height: 48rpx;
			}

			view {
				font-size: 22rpx;
			}
		}
	}

	.formItem {
		border-bottom: 1rpx solid #f1f4f8;
		padding: 24rpx 0;

		input {
			text-align: right;
		}
	}
</style>
